<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>报表4</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <div class="wxw_contain">
        <div class="wxw_header"><span>物业数据饼状图</span></div>
        <div class="wxw_remark">
            <table>
                <tr>
                    <td>浏览量占比</br><span>100%</span></td>
                    <td>新访客数</br><span>89</span></td>
                    <td>跳出率</br><span>98.56%</span></td>
                    <td>平均访问时长</br><span>00:01:29</span></td>
                    <td style="border-right:0">平均访问页数</br><span>1.68</span></td>
                </tr>
            </table>
        </div>
        <div id="index4" class="wxw_echart"></div>
    </div>
    <!-- <script src="js/echarts-all.js"></script> -->
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    
     <script type="text/javascript">
       require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 基于准备好的dom，初始化echarts图表
         require(
            [
                'echarts',
                'echarts/chart/bar',
                // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('index4')); 
                
                var option = {
    title: {
        x: 'center',
        text: '费用统计',
        // subtext: 'Rainbow bar example',
        // link: 'http://echarts.baidu.com/doc/example.html'
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    grid: {
        borderWidth: 0,
        y: 80,
        y2: 60
    },
    xAxis: [
        {
            type: 'category',
            show: false,
            data: ['电费', '水费', '管理费', '垃圾费', '租赁保证金', '装修保证金', '广告费', '广告快讯费', '租金', '托管费', '其他']
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: false
        }
    ],
    series: [
        {
            name: '费用统计',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: [12,21,10,4,12,5,6,5,25,23,7],
            markPoint: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter: function(params){
                    //     return '<img src="' 
                    //             + params.data.symbol.replace('image://', '')
                    //             + '"/>';
                    // }
                },
                data: [
                    {xAxis:0, y: 350, name:'电费', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'},
                    {xAxis:1, y: 350, name:'水费', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'},
                    {xAxis:2, y: 350, name:'管理费', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'},
                    {xAxis:3, y: 350, name:'垃圾费', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'},
                    {xAxis:4, y: 350, name:'租赁保证金', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'},
                    {xAxis:5, y: 350, name:'装修保证金', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'},
                    {xAxis:6, y: 350, name:'广告费', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'},
                    {xAxis:7, y: 350, name:'广告快讯费', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'},
                    {xAxis:8, y: 350, name:'租金', symbolSize:20, symbol: 'image://../asset/ico/地图.png'},
                    {xAxis:9, y: 350, name:'托管费', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'},
                    {xAxis:10, y: 350, name:'其他', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                ]
            }
        }
    ]
};
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>